<!DOCTYPE html>
<html class="borderless">
<head>
    <title>ScenarioWebViewEventMonitor</title>
    <style>
        .borderless {
            border: 0;
            padding: 0;
            margin: 0;
        }

        body {
            background-color: #f0f0f2;
            font-family: "Segoe UI", Helvetica, sans-serif;
        }

        .container {
            display: grid;
            width: 100%;
            height: 100%;
            grid-template-columns: 300px 1fr;
            grid-template-rows: 200px 1fr;
        }

        .header {
            grid-column: 1/3;
            grid-row: 1;
        }

        .list {
            grid-column: 1;
            grid-row: 2;
            width: 100%;
            height: 100%;
        }

        .details {
            grid-column: 2;
            grid-row:2;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body class="container borderless">
    <div class="header">
        <h1>WebView Event Monitor</h1>
        <button id="clearButton">Clear</button>
        <button id="toggleWebResourceRequestedEventButton">WebResourceRequested off</button>
    </div>
    <div id="eventList" class="list"></div>
    <div id="details" class="details"></div>
    <script>
        const eventList = document.getElementById("eventList");
        const details = document.getElementById("details");
        const toggleWebResourceRequestedEventButton = document.getElementById("toggleWebResourceRequestedEventButton");
        let webResourceRequestedEventOn = false;

        toggleWebResourceRequestedEventButton.addEventListener("click", () => {
            webResourceRequestedEventOn = !webResourceRequestedEventOn;
            toggleWebResourceRequestedEventButton.textContent = "webResourceRequested " + (webResourceRequestedEventOn ? "on" : "off");
            chrome.webview.postMessage("webResourceRequested," + (webResourceRequestedEventOn ? "on" : "off"));
        });

        function textToHtml(text, blockElement) {
            let div = document.createElement(blockElement ? "div" : "span");
            div.textContent = text;
            return div;
        }

        function objectToHtml(prefix, obj) {
            if (obj === null) {
                return textToHtml(prefix + "null", false);
            } else if (obj === undefined) {
                return textToHtml(prefix + "undefined", false);
            } else if (typeof obj === typeof 1 ||
                typeof obj === typeof "" ||
                typeof obj === typeof true) {

                return textToHtml(prefix + JSON.stringify(obj), false);
            } else if (typeof obj === "object") {
                const contents = document.createElement("div");
                contents.appendChild(textToHtml(prefix), false);
                const list = document.createElement("ul");
                contents.appendChild(list);

                for (let name in obj) {
                    try {
                        let value = obj[name];
                        let li = document.createElement("li");
                        li.appendChild(objectToHtml(name + ": ", value));
                        list.appendChild(li);
                    } catch (e) {
                    }
                }
                return contents;
            }
            return textToHtml(prefix + JSON.stringify(obj), false);
        }

        chrome.webview.addEventListener("message", args => {
            const nameElement = document.createElement("div");
            nameElement.textContent = args.data.name;
            nameElement.addEventListener("click", () => {
                details.textContent = "";
                details.appendChild(textToHtml(args.data.name + " event args", true));
                details.appendChild(objectToHtml("", args.data.args));
                details.appendChild(textToHtml("WebView properties", true));
                details.appendChild(objectToHtml("", args.data.webview));
            });
            eventList.appendChild(nameElement);
        });

        document.getElementById("clearButton").addEventListener("click", () => {
            eventList.textContent = "";
        });
    </script>
</body>
</html>
